<template>
	<div class="MyWorksEntry">
		<!-- <router-link to="/homepage"> -->
			<img :src="MyWorksEntry_items.img_src" alt="">
			<h3>{{MyWorksEntry_items.book_tit}}</h3>
			<p>{{MyWorksEntry_items.introduction}}</p>
		<!-- </router-link> -->
	</div>
</template>

<script>
	export default {
		name: 'MyWorksEntry',
		props: {
			MyWorksEntry_items: {
				type: Object,
				default () {
					return {}
				}
			}
		}
	}
</script>

<style>
	.MyWorksEntry{
		width: 100%;
		height: 126px;
		background: rgb(245,245,246);
		margin-top: 20px;
	}
	.MyWorksEntry img{
		width: 21%;
		height: 86%;
		margin-left: 10px;
		margin-top: 2%;
		float: left;
	}
	.MyWorksEntry h3{
		width: 50%;
		font-size: 15px;
		margin-left: 14px;
		float: left;
		margin-top: 9PX;
		font-weight: 800;
	}
	.MyWorksEntry p{
		width: 60%;
		height: 67px;
		font-size: 12px;
		float: left;
		margin-left: 14px;
		display: -webkit-box;    
		-webkit-box-orient: vertical;    
		-webkit-line-clamp: 4;    
		overflow: hidden;

	}
</style>
